<template>
  <div class="attendance">
    <div class="top">
      <div class="top-left" style="margin-top: 17px">
        <p>未处理</p>
        <p class="t1">0</p>
      </div>
      <div class="top-right">
        <div></div>
        <div class="t2" style="display: flex; align-items: center">
          <el-button @click="alertshow = true">打卡范围</el-button>
          <el-button type="primary" @click="attendset">设置</el-button>
        </div>
      </div>
    </div>
    <div class="content" style="margin-bottom: 10px">
      <Report :bumendata="bumendata" :changesearch="changesearch" />
    </div>
    <div class="bottom" style="padding: 20px">
      <Attendancetable :handleSizeChange="handleSizeChange" :total="total" :attendanceList="attendanceList"
        :days="days">
      </Attendancetable>
    </div>
    <div class="mask" v-if="alertshow">
      <div class="alert">
        <div style="line-height: 80px">打卡范围设置</div>
        <div>
          <Maps />
        </div>
      </div>
      <div class="mask-Btn">
        <el-button @click="alertshow = false">取消</el-button>
        <el-button style="color: white; background-color: #2752fb; border: none" @click="entercompany">批量保存</el-button>
      </div>
    </div>
    <alerts />
  </div>
</template>

<script setup lang="ts">
import {
  getAttendanceList,
  updateCompanyCoordinateList,
} from "../api/attendance";
import Attendancetable from "../components/Attendancetable.vue";
import { ref, onMounted } from "vue";
import Report from "@/components/Attendance/Report.vue";
import { addSocialTable } from "@/api/Socialtable";
import { useStore } from "@/stores/counter";
import Maps from "@/components/Maps.vue";
import { ElMessage } from "element-plus";
let alertshow = ref(false);
const store = useStore();
const attendanceList = ref([]);
let total = ref(0);
let page = ref<string>("1");
let pagesize = ref<string>("10");
let bumendata: any = ref([]);

//更新公司经纬度列表
const entercompany = () => {
  updateCompanyCoordinateList(store.$state.companynewlist)
    .then((res: any) => {

      if (res.data.success) {
        ElMessage({
          message: res.data.message,
          type: "success",
        });
        alertshow.value = false;
      } else {
        ElMessage.error(res.data.message);
      }
    })
    .catch((err: any) => { });
};
let days = ref([])
const render = () => {
  getAttendanceList(page.value, pagesize.value, store.$state.deptID).then(
    (res) => {
      attendanceList.value = res.data.data.data.rows;
      total.value = res.data.data.data.total;
      days.value = res.data.data.data.rows[1].attendanceRecord.map((k: any) => {
        return {
          date: k.day,
        };
      });

    }
  );
};
addSocialTable().then((res: any) => {
  bumendata.value = res.data.data;
});
onMounted(() => {
  render();
});
// 分页
const handleSizeChange = (pages: any) => {
  page.value = pages;
  render();
};
//多选搜索
const changesearch = () => {
  render();
};
//考勤设置
const attendset = () => {
  store.$state.dialogVisible = true;
  store.$state.alerttitle = "考勤设置";
};
</script>

<style>
@import "../assets/attendance.css";
</style>
